<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>light</title>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <style>
        .list {
            overflow: hidden;
            width: 400px;
            margin: 0 auto;
        }
        .list div {
            float: left;
            width: 30px;
            height: 30px;
            background: orange;
            text-align: center;
            line-height: 30px;
            margin-left: 10px;
            margin-bottom: 5px;
        }
        .list div:hover {
            cursor: pointer;
        }
        video {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="list">
        <div id="_1">1</div>
        <div id="_2">2</div>
        <div id="_3">3</div>
        <div id="_4">4</div>
        <div id="_5">5</div>
        <div id="_6">6</div>
        <div id="_7">7</div>
        <div id="_8">8</div>
        <div id="_9">9</div>
        <div id="_10">10</div>
        <div id="_11">11</div>
        <div id="_12">12</div>
        <div id="_13">13</div>
        <div id="_14">14</div>
        <div id="_15">15</div>
        <div id="_16">16</div>
        <div id="_17">17</div>
        <div id="_18">18</div>
        <div id="_19">19</div>
        <div id="_20">20</div>
        <div id="_21">21</div>
        <div id="_22">22</div>
        <div id="_23">23</div>
        <div id="_24">24</div>
        <div id="_25">25</div>
        <div id="_26">26</div>
        <div id="_27">27</div>
        <div id="_28">28</div>
    </div>
    <video src="video/1.mp4" width="500" height="300" controls="controls" id="video"></video>
    <script>
        var bbb=document.getElementById("video");
        $('#_1').click(function(){
            bbb.src='video/1.mp4'
        });
        $('#_2').click(function(){
            bbb.src='video/2.mp4'
        });
        $('#_3').click(function(){
            bbb.src='video/2.mp4'
        });
        $('#_4').click(function(){
            bbb.src='video/4.mp4'
        });
        $('#_5').click(function(){
            bbb.src='video/5.mp4'
        });
        $('#_6').click(function(){
            bbb.src='video/6.mp4'
        });
        $('#_7').click(function(){
            bbb.src='video/7.mp4'
        });
        $('#_8').click(function(){
            bbb.src='video/8.mp4'
        });
        $('#_9').click(function(){
            bbb.src='video/9.mp4'
        });
        $('#_10').click(function(){
            bbb.src='video/3.mp4'
        });
        $('#_11').click(function(){
            bbb.src='video/3.mp4'
        });
        $('#_12').click(function(){
            bbb.src='video/3.mp4'
        });
        $('#_13').click(function(){
            bbb.src='video/13.mp4'
        });
        $('#_14').click(function(){
            bbb.src='video/14.mp4'
        });
        $('#_15').click(function(){
            bbb.src='video/15.mp4'
        });
        $('#_16').click(function(){
            bbb.src='video/16.mp4'
        });
        $('#_17').click(function(){
            bbb.src='video/17.mp4'
        });
        $('#_18').click(function(){
            bbb.src='video/18.mp4'
        });
        $('#_19').click(function(){
            bbb.src='video/19.mp4'
        });
        $('#_20').click(function(){
            bbb.src='video/20.mp4'
        });
        $('#_21').click(function(){
            bbb.src='video/21.mp4'
        });
        $('#_22').click(function(){
            bbb.src='video/22.mp4'
        });
        $('#_23').click(function(){
            bbb.src='video/23.mp4'
        });
        $('#_24').click(function(){
            bbb.src='video/24.mp4'
        });
        $('#_25').click(function(){
            bbb.src='video/25.mp4'
        });
        $('#_26').click(function(){
            bbb.src='video/26.mp4'
        });
        $('#_27').click(function(){
            bbb.src='video/27.mov'
        });
        $('#_28').click(function(){
            bbb.src='video/28.mov'
        });
    </script>
</body>
</html>